<template>
	<view class="warranty-search">
		<view class="warranty-search-wrap">
			<image class="header-img" src="/static/images/1_r1_c1.jpg"></image>
			
			<view class="warranty-search-box">
				<input type="text" placeholder="请输入订单号" v-model="sourceTradeNos" />
				<button v-on:click="search(sourceTradeNos)">搜索</button>
			</view>
			
			<view class="rich-ad" v-if="is_show">
				<rich-text :nodes="adNode"></rich-text>
			</view>
			
			<image class="footer-img" src="/static/images/1_r7_c2.jpg"></image>
			
			<pageFooter :style="colorStyle"></pageFooter>
		</view>
		
		<view class="customer-icon" @tap="goGoodCall">
			<text class="iconfont icon-ic_customerservice fs-40"></text>
			<text class="fs-18">客服</text>
		</view>
		<view class="goback-icon" @tap="goTop">
			<text class="iconfont icon-ic_up2 fs-40"></text>
			<text class="fs-18">置顶</text>
		</view>
	</view>
</template>

<script>
	import {
	  mapGetters
	} from "vuex";
	import {
	  toLogin
	} from '@/libs/login.js';
	import pageFooter from '@/components/pageFooter/index.vue';
	import { getOrderByOrderNo } from "@/api/warranty.js";
	import { getAdDetail } from '@/api/unicode.js';
	export default {
		name: "WarrantyDetail",
		components: {
		  pageFooter
		},
		computed: {
		  ...mapGetters({
		    isLogin: 'isLogin'
		  })
		},
		data() {
			return {
				adNode: "",
				is_show: 0,
				sourceTradeNos: undefined
			};
		},
		mounted() {
			this.getNode();
		},
		methods: {
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			goGoodCall() {
				let userInfo = uni.getStorage("USER_INFO")
				// let url = `/pages/extension/customer_list/chat?productId=${this.id}`
				// let obj = {
				// 	store_name: this.storeInfo.store_name,
				// 	path: `/pages/goods_details/index?id=${this.storeInfo.id}`,
				// 	image:this.storeInfo.image
				// }
				this.$util.getCustomer(userInfo, null, null, 0)
			},
			getNode() {
				getAdDetail({id: 4}).then((res) => {
					if(res?.status === 200 && res?.data) {
						this.adNode = res?.data?.content;
						this.is_show = res?.data?.is_show;
					}
				}).catch((msg) => {
					this.is_show = 0;
				});
			},
			search(sourceTradeNos) {
				if(this.isLogin === false) {
					toLogin();
				} else {
					getOrderByOrderNo({sourceTradeNos}).then((res) => {
						if(res?.status === 200 && res?.data) {
							this.gotoDedail();
						} else {
							uni.showToast({
								icon: 'error',
								title: "订单号无效！"
							})
						}
					}).catch((msg) => {
						uni.showToast({
							icon: 'error',
							title: msg && typeof msg === "string" ? msg : "订单号无效！"
						})
					});
				}
			},
			gotoDedail() {
				if(this.sourceTradeNos) {
					uni.navigateTo({
						url: '/pages/warranty/detail?sourceTradeNos=' + this.sourceTradeNos
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: "请输入订单号！",
					})
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.rich-ad {
		margin: 40rpx;
	}
	.warranty-search {
		background-color: #86151a;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.warranty-search-wrap {
		position: relative;
		min-height: 100vh;
		background: url("@/static/images/1_r3_c1.jpg");
		background-size: contain;
		border-bottom: 16rpx solid #86151a;
		
		.header-img {
			height: 168rpx;
			width: 100%;
		}
		
		.warranty-search-box {
			margin-top: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		input {
			width: 420rpx;
			padding: 4rpx 24rpx;
			height: 62rpx;
			border-radius: 4rpx;
			color: #86151a;
			border: 2rpx solid #86151a;
		}
		
		button {
			font-size: 14px;
			border-radius: 4rpx;
			height: 76rpx;
			width: 120rpx;
			line-height: 76rpx;
			color: #fff;
			background-color: #86151a;
			margin-left: 16rpx;
		}
		
		.footer-img {
			margin: 0 auto 80rpx;
			display: block;
			height: 564rpx;
			width: 650rpx;
		}
	}
	
	.customer-icon {
		position: fixed;
		bottom: 280rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
	.goback-icon {
		position: fixed;
		bottom: 160rpx;
		right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 0 6rpx #750c1082;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		background-color: #750c1082;
		border-radius: 50%;
		margin-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		margin-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
</style>